<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web worker</title>
  </head>

  <script>
    const number = 20; // 运行次数

    // 多线程测试
    function workerTest() {
      console.log(
        "%c 开始多线程测试 ",
        "color:#fff; background:#00897b ",
        Date.now()
      );
      const workerList = [];
      const myWorker = new Worker("myworker.js");
      myWorker.postMessage({
        function: "fb",
        data: 43,
      });
      myWorker.onmessage = (e) => {
        // 关闭worker线程
        myWorker.terminate();
        console.log("worker多线程执行时间", Date.now());
      };
    }
    function singleTest() {
      console.log(
        "%c 开始单线程测试 ",
        "color:#fff; background:#00897b ",
        Date.now()
      );
      const arr = [];
      for (let index = 0; index < 99999999; index++) {
        arr.push(index);
      }
      console.log("单线程测试完成", Date.now());
      return arr;
    }
  </script>

  <body>
    <button onclick="singleTest()">单线程测试</button>
    <button onclick="workerTest()">多线程测试</button>
  </body>
</html>
